<template>
  <div style="padding: 24px 36px 0 36px">
    <dataCard width="1848" height="404" title="训练员授课管理情况">
      <div class="card1 flex">
        <!-- 卡片 -->
        <div class="cards flex">
          <div class="item" style="margin: 32px 0 0 15px">
            <img
              class="icon"
              src="@/assets/images/screen/trainer/icon1.png"
              alt=""
            />
            <div class="value">{{ card1_teaNumAndAvgStuNum.teaNum || 0 }}</div>
            <div class="label">训练员数量</div>
          </div>
          <div class="item" style="margin: 32px 0 0 24px">
            <img
              class="icon"
              src="@/assets/images/screen/trainer/icon2.png"
              alt=""
            />
            <div class="value">
              {{ card1_teaNumAndAvgStuNum.avgStuNum || 0 }}
            </div>
            <div class="label">平均每位训练员的学员数量</div>
          </div>
        </div>
        <!--  训练员批改时长排行榜-->
        <div class="correctRank">
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              训练员批改时长排行榜
            </div>
            <div
              class="more shou"
              @click="trainer_markDurationList_Dia_open = true"
            >
              详情 >
            </div>
          </div>
          <div class="progressBox">
            <div
              class="item"
              v-for="(item, index) in card1_markDurationList"
              :key="index"
            >
              <div class="line flexbet">
                <div class="no_name flex">
                  <div class="no">{{ index + 1 }}</div>
                  <el-tooltip
                    effect="dark"
                    :content="item.nickName"
                    placement="top-start"
                  >
                    <div class="name overtxt">{{ item.nickName }}</div>
                  </el-tooltip>
                </div>
                <div class="store overtxt">{{ item.schoolName }}</div>
                <div class="time overtxt">
                  {{ $convertSeconds(item.duration ? item.duration : 0) }}
                </div>
              </div>
              <div class="progress rela">
                <div
                  class="progress-bar abso"
                  :style="{
                    width:
                      (item.duration / card1_markDurationList_maxTime) * 100 +
                      '%',
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <!--  训练员平均补考审批时长排行榜-->
        <div class="reExamRank">
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              训练员平均补考审批时长排行榜
            </div>
            <div
              class="more shou"
              @click="trainer_examApplyApprovalDurationList_Dia_open = true"
            >
              详情 >
            </div>
          </div>
          <div class="progressBox">
            <div
              class="item"
              v-for="(item, index) in card1_examApplyApprovalDurationList"
              :key="index"
            >
              <div class="line flexbet">
                <div class="no_name flex">
                  <div class="no">{{ index + 1 }}</div>
                  <el-tooltip
                    effect="dark"
                    :content="item.nickName"
                    placement="top-start"
                  >
                    <div class="name overtxt">
                      {{ item.nickName }}
                    </div></el-tooltip
                  >
                </div>
                <div class="store overtxt">{{ item.schoolName }}</div>
                <div class="time overtxt">
                  {{ $convertSeconds(item.duration ? item.duration : 0) }}
                </div>
              </div>
              <div class="progress rela">
                <div
                  class="progress-bar abso"
                  :style="{
                    width:
                      (item.duration /
                        card1_examApplyApprovalDurationList_maxTime) *
                        100 +
                      '%',
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dataCard>

    <dataCard width="1848" height="525" style="margin-top: 24px">
      <div class="card2">
        <div class="navs flex rela">
          <div
            :class="['nav', 'shou', activeName == item.active ? 'active' : '']"
            v-for="(item, index) in nav"
            :key="index"
            @click="tabcChange(item)"
          >
            {{ item.name }}
          </div>
          <div
            class="bottomline abso"
            :style="{ left: nav[activeName].left + 'px' }"
          ></div>
        </div>
        <div style="padding: 16px 40px">
          <trainer_studentNum
            v-show="activeName == 0"
            :active="activeName"
          ></trainer_studentNum>
          <trainer_set
            v-show="activeName == 1"
            :active="activeName"
          ></trainer_set>
          <trainer_courseSend
            v-show="activeName == 2"
            :active="activeName"
          ></trainer_courseSend>
          <trainer_study
            v-show="activeName == 3"
            :active="activeName"
          ></trainer_study>
          <trainer_reExam
            v-show="activeName == 4"
            :active="activeName"
          ></trainer_reExam>
          <trainer_courseEvaluation
            v-show="activeName == 5"
            :active="activeName"
          ></trainer_courseEvaluation>
        </div>
      </div>
    </dataCard>
    <trainer_markDurationList_Dia
      :open.sync="trainer_markDurationList_Dia_open"
    ></trainer_markDurationList_Dia>
    <trainer_examApplyApprovalDurationList_Dia
      :open.sync="trainer_examApplyApprovalDurationList_Dia_open"
    ></trainer_examApplyApprovalDurationList_Dia>
  </div>
</template>
  
<script>
import trainer_markDurationList_Dia from "./components/trainer_markDurationList_Dia";
import trainer_examApplyApprovalDurationList_Dia from "./components/trainer_examApplyApprovalDurationList_Dia";
import {
  teaNumAndAvgStuNum,
  markDurationList,
  examApplyApprovalDurationList,
} from "@/api/screen/train";
import * as echarts from "echarts";
import dataCard from "./components/dataCard";
import trainer_studentNum from "./components/trainer_studentNum";
import trainer_set from "./components/trainer_set";
import trainer_courseSend from "./components/trainer_courseSend";
import trainer_study from "./components/trainer_study";
import trainer_reExam from "./components/trainer_reExam";
import trainer_courseEvaluation from "./components/trainer_courseEvaluation";
export default {
  components: {
    trainer_markDurationList_Dia,
    trainer_examApplyApprovalDurationList_Dia,
    dataCard,
    trainer_studentNum,
    trainer_set,
    trainer_courseSend,
    trainer_study,
    trainer_reExam,
    trainer_courseEvaluation,
  },
  data() {
    return {
      trainer_markDurationList_Dia_open: false,
      trainer_examApplyApprovalDurationList_Dia_open: false,
      nav: [
        {
          name: "训练学员数量详情",
          active: 0,
          left: 50,
        },
        {
          name: "影城训练员设置情况详情",
          active: 1,
          left: 271,
        },
        {
          name: "课程下发情况统计详情",
          active: 2,
          left: 497,
        },
        {
          name: "学习周期情况统计详情",
          active: 3,
          left: 715,
        },
        {
          name: "补考审批周期&作业批改周期情况统计详情",
          active: 4,
          left: 1000,
        },
        {
          name: "课程评价情况统计详情",
          active: 5,
          left: 1295,
        },
      ],
      activeName: 0,
      card1_loading: false,
      card1_teaNumAndAvgStuNum: {},
      card1_markDurationList: [],
      card1_examApplyApprovalDurationList: [],
      card1_markDurationList_maxTime: 0,
      card1_examApplyApprovalDurationList_maxTime: 0,
    };
  },
  mounted() {
    this.getCard1_data();
  },
  methods: {
    tabcChange(item) {
      this.activeName = item.active;
    },
    async getCard1_data() {
      this.card1_loading = true;

      try {
        const [api1Data, api2Data, api3Data] = await Promise.all([
          teaNumAndAvgStuNum(),
          markDurationList({
            pageNum: 1,
            pageSize: 6,
          }),
          examApplyApprovalDurationList({
            pageNum: 1,
            pageSize: 6,
          }),
        ]);
        this.card1_teaNumAndAvgStuNum = api1Data.data;
        this.card1_markDurationList = api2Data.rows;
        this.card1_examApplyApprovalDurationList = api3Data.rows;
        this.card1_markDurationList_maxTime = api2Data.rows.reduce(
          (max, current) => {
            return current.duration > max ? current.duration : max;
          },
          -Infinity
        );
        this.card1_examApplyApprovalDurationList_maxTime = api3Data.rows.reduce(
          (max, current) => {
            return current.duration > max ? current.duration : max;
          },
          -Infinity
        );
      } finally {
        this.card1_loading = false;
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.card2 {
  .navs {
    border-bottom: 1px solid #eeeeee;
    padding: 30px 0 24px 30px;
    .nav:nth-of-type(1) {
      margin-left: 0px;
    }
    .nav {
      margin-left: 58px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #666666;
      line-height: 18px;
      font-style: normal;
    }
    .active {
      font-weight: 600;
      line-height: 16px;
      font-size: 18px;
      color: #ff6801;
    }
    .bottomline {
      transition: all 0.5s ease-in-out;
      bottom: -1px;
      width: 98px;
      height: 2px;
      background: #ff6801;
      border-radius: 1px;
    }
  }
}
.ranktitle {
  .txt {
    img {
      margin-right: 3px;
      width: 8px;
      height: 11px;
    }
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }
  .more {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    line-height: 22px;
    font-style: normal;
  }
}
.progressBox {
  padding-left: 20px;
  .item:nth-of-type(1) .no {
    color: #ff5806 !important;
  }
  .item:nth-of-type(2) .no {
    color: #ffa63b !important;
  }
  .item:nth-of-type(3) .no {
    color: #ffd03b !important;
  }
  .item {
    margin-top: 17px;

    .line {
      .no_name {
        .no {
          margin: 0 15px 0 9px;
          color: #999999;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;

          line-height: 22px;
          font-style: normal;
        }
        .name {
          width: 120px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          font-style: normal;
        }
      }
      .store {
        width: 250px;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;

        font-style: normal;
      }
      .time {
        width: 115px;
        text-align: right;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #9a8157;
        line-height: 19px;
        font-style: normal;
      }
    }

    .progress {
      margin-top: 5px;
      width: 532px;
      height: 4px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 2px;
      .progress-bar {
        height: 4px;
        border-radius: 2px;
        background: linear-gradient(270deg, #ff6801 0%, #ffe9ce 100%);
      }
    }
  }
}
.card1 {
  .correctRank {
    margin: 16px 0 0 24px;
    width: 552px;
  }
  .reExamRank {
    margin: 16px 0 0 52px;
    width: 552px;
  }
  .cards {
    .item {
      width: 280px;
      height: 256px;
      background: #ffffff;
      box-shadow: 0px 11px 24px -11px rgba(0, 0, 0, 0.23);
      border-radius: 8px;
      border: 2px solid #ffffff;
      .icon {
        margin: 40px 104px 0 104px;
        width: 72px;
        height: 72px;
      }
      .value {
        margin-top: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40px;
        color: #ff6801;
        line-height: 56px;
        text-align: center;
        font-style: normal;
      }
      .label {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
</style>